<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<th:block th:include="include :: iCheck-css" />
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m col-sm-5" id="form-papertpl-add" style="float:left;" >
			<input id="ksid" name="ksid" type="hidden" th:value="${ksid}">	
			
			<div class="form-group">
			<label class="col-sm-4 control-label">题库：</label>
			<div class="col-sm-8">
				<input id="qdbid" name="qdbid" type="hidden"/>
				<input id="treeId" name="kbid" type="hidden" th:value="${qdb.id}"/>
				<input class="form-control" type="text" id="treeName" onclick="selectTree()" readonly="true" th:value="${qdb.name}"/>

			</div>
		</div>
			<div class="form-group">
			<label class="col-sm-4 control-label">题型：</label>
			<div class="col-sm-8">
				<select id="qtid"  name="qtid" class="form-control noselect2 selectpicker">
                	<option value=""> -- 请选择题型 -- </option>
                	<option th:each="qtype : ${qtypes}" th:value="${qtype.id}" th:text="${qtype.name}"></option>
                </select>
			</div>
		</div>
	
			<div class="form-group">
			<label class="col-sm-4 control-label">难易度：</label>
			<div class="col-sm-8">
				<select id="qteasy"  name="qteasy" class="form-control noselect2 selectpicker">
                	<option value="0" selected>不区分难度</option>
                	<option value="1">非常容易</option>
                	<option value="2">容易</option>
                	<option value="3">中等</option>
                	<option value="4">难度</option>
                	<option value="5">非常难</option>
                </select>
			</div>
		</div>
	
			<div class="form-group">
			<label class="col-sm-4 control-label">设置分值：</label>
			<div class="col-sm-8">
				<input id="score" name="score" class="form-control" type="text">
			</div>
		</div>
	<div class="form-group">
			<label class="col-sm-4 control-label">储备题量：</label>
			<div class="col-sm-8">
				<div style="color:#f00;font-size:18px;" >
				<a id="qnumofdb" class="btn btn-info btn-xs" href="#" >0</a>
				</div>
			</div>
		</div>
			<div class="form-group">
			<label class="col-sm-4 control-label">圈定题量及范围：</label>
			<div class="col-sm-8">
				<a id="qnumofsel" class="btn btn-success btn-xs" href="#" >0</a>
				<button type="button" class="btn btn-sm btn-primary" onclick="submit1()"><i class="fa fa-check"></i>圈定题目</button>&nbsp;
				<textarea id="qids" readonly="true" name="qids" class="form-control"></textarea>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label">设置题量(必须小于或等于圈定的题量)：</label>
			<div class="col-sm-8">
				<input id="qnum" name="qnum" class="form-control" type="text">
			</div>
		</div>
	
	</form>
	<div class="col-sm-6">
	<div class="" id="qlist"></div>
	<div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            
        </div>
    </div>
	</div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript">
	var prefix = ctx + "exam/papertpl"
	$("#form-papertpl-add").validate({
		onkeyup: false,
		rules:{
			kbid:{
				required:true
			},
			qtid:{
				required:true				
			},
			qteasy:{
				required:true
			},
			score:{
				required:true,
				min:0.5
			},
			qnum:{
				required:true,
				min:1,max:1
			},
		},
		errorPlacement: function(error, element) {
			error.appendTo(element.parent());
		}
	});

	function submitHandler() {
		if ($.validate.form()) {
			var qdbid=$("#qdbid").val();
	    	var kbid=$("input[name='kbid']").val();
	    	if(qdbid==1){$("#qdbid").val(kbid);$("input[name='kbid']").val("0");}
			$.operate.save(prefix + "/addDo", $('#form-papertpl-add').serialize());
		}
	}
    function selectTree() {
        var treeId = $("#treeId").val();
    	var id = $.common.isEmpty(treeId) ? "1" : $("#treeId").val();
        var options = {
            title: '选择上级',
            width: "380",
            url: ctx + "exam/qdb/selectTree/" + id,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#qdbid").val(body.find('#treeId').attr("pid"));
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
            getQnumofDB();
    }
    $('#qtid').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
    	getQnumofDB();
    });
    $('#qteasy').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
    	getQnumofDB();
    });
    function getQnumofDB(){

    	var qdbid=$("#qdbid").val();
    	var kbid=$("input[name='kbid']").val();
    	if(qdbid==1){qdbid=kbid;kbid=null;}
    	var qtid=$("#qtid").val();
    	var qteasy=$("#qteasy").val();
    	if(qdbid.length>0 &&  qtid.length>0){//kbid.length>0 &&
	    	var config = {
        	        url: prefix + "/getQnumofDB",
        	        type: "post",
        	        data: {'qdbid':qdbid,'kbid':kbid,'qtid':qtid,'qteasy':qteasy},
        	        beforeSend: function () {
        	        	$.modal.loading("正在处理中，请稍后...");
        	        },
        	        success: function(result) {
        	        	$.modal.closeLoading();
        	        	var n=result.total;
        	        	$("#qnumofdb").text(n);
        	        	$("#qnumofsel").text(n);
        	        	$("#qnum").rules("remove");
        	            $("#qnum").rules("add", { required: true,min: 1, max:n });
        	            $("#qlist").empty();//必须先清空
        	            var qids="";
        	            for(var i=0;i<n;i++){
        	            	var row=result.rows[i];
        	            	var cb='<input name="question" type="checkbox" value="'+row.id+'" class="form-control">';
        	            	if(i==n-1) qids+=row.id;
        	        		else qids+=row.id+",";
        	            	cb+=row.id+". "+row.name+"<br>";
        	            	if(row.ansA && row.ansA.length>0) cb+="A. "+row.ansA+"<br>";
        	            	if(row.ansB && row.ansB.length>0) cb+="B. "+row.ansB+"<br>";
        	            	if(row.ansC && row.ansC.length>0) cb+="C. "+row.ansC+"<br>";
        	            	if(row.ansD && row.ansD.length>0) cb+="D. "+row.ansD+"<br>";
        	            	
        	            	var ti=$("<label style='margin-left: 2px;'></label>").html(cb);
							$("#qlist").append(ti);
        	            }
        	            $("#qids").val(qids);
        	            
        	            $("#qlist input[type='checkbox']").iCheck({//设置iCheck组件初始化，绑定css和事件
        	                cursor: true,
        	                handle: 'checkbox',
        	                checkboxClass: 'icheckbox_square-green',
        	                radioClass: 'iradio_square-green',
        	                increaseArea: '20%'
        	            });
        	            //设置复选框默认不选中
        	            //$("input[name='roleCheck']").iCheck('uncheck');

        	        }
        	    };
        	    $.ajax(config);        	    
    	}
    }
    function submit1(){
    	//var qsels=$("#qlist div.checked input[type='checkbox']");
    	var qsels=$.form.selectCheckeds("question");
    	var n=0;
    	if(qsels) n=qsels.split(",").length;
    	$("#qnumofsel").text(n);
    	$("#qnum").rules("remove");
        $("#qnum").rules("add", { required: true,min: 1, max:n });
    	$("#qids").val(qsels);
    	
    }

</script>
<style>
#backtotop {
     width: 24px;
     color: white;
     padding: 12px 0px 12px 5px;
     display: none;
     position: fixed;
     cursor: pointer;
     text-align: center;
     z-index: 20;
     background-color: rgba(0, 188, 212, 0.65);
     border-radius: 12px 0px 0px 12px;
}
</style>
<div id="backtotop" style="right: 0px;display: none;">回到顶部</div>
<script>
var $backtotop = $('#backtotop');
var toplrw = $(window).height() -$backtotop.height() - 200;
function moveBacktotop() {
     if(toplrw<0)toplrw=0;
     $backtotop.css({ top: toplrw,right: 0});
}
$backtotop.click(function () {
     $('html,body').animate({ scrollTop:0 });
     return false;
});

$(window).scroll(function () {
     var windowHeight = $(window).scrollTop();
     if(windowHeight > 200) {
     $backtotop.fadeIn();
     } else{
     $backtotop.fadeOut();
     }
});
moveBacktotop();
$(window).resize(moveBacktotop);

</script>
</body>
</html>
